<template>
  <div class="edit">
    <!-- 顶部 -->
    <van-nav-bar
      title="收货地址"
      left-text="返回"
      left-arrow
      @click-left="onClickLeft"
    >
    </van-nav-bar>

    <van-address-edit
      :area-list="areaList"
      show-postal
      show-delete
      show-set-default
      show-search-result
      :area-columns-placeholder="['请选择', '请选择', '请选择']"
      @save="onSave"
      @delete="onDelete"
      @change-detail="onChangeDetail"
    />
  </div>
</template>

<script>
import { areaList } from "@vant/area-data";
import { Toast } from "vant";
export default {
  data() {
    return {
      uid: sessionStorage.getItem("uid"),
      areaList,
      searchResult: [],
    };
  },
  methods: {
    onClickLeft() {
      // 回退到上一个页面
      this.$router.go(-1);
    },
    // 保存
    onSave(event) {
      console.log(event);
      this.axios
        .post(
          "/address/reg",
          `uid=${this.uid}&name=${event.name}&tel=${event.tel}&province=${event.province}&city=${event.city}&county=${event.county}&address=${event.province}${event.city}${event.county}${event.addressDetail}&areaCode=${event.areaCode}&postalCode=${event.postalCode}`
        )
        .then((result) => {
          console.log(result.data);
          Toast("保存成功");
          this.$router.push("/address/${this.uid}");
        });
    },
    onDelete() {
      Toast("delete");
    },
    onChangeDetail(val) {},
  },
};
</script>

<style>
.edit .van-nav-bar {
  background-color: rgb(222, 196, 155);
}
.edit .van-nav-bar .van-icon,
.edit .van-nav-bar__text,
.edit .van-nav-bar__title {
  color: white;
}
.edit .van-switch--on {
  background-color: rgb(222, 196, 155);
}
.edit .van-button--danger {
  background-color: rgb(222, 196, 155);
  border: rgb(222, 196, 155);
}
.edit .van-button--default {
  border: 1px solid rgb(222, 196, 155);
  color: rgb(222, 196, 155);
}
</style>